<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" rel="stylesheet">
        body {
            margin: 0
        }

        .box {
            height: 300px;
            width: 400px;
            border: 5px solid black;
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            left: 30%;
            top: 30%;
        }

        .hd {
            width: 100%;
            height: 25px;
            background-color: #4d4d4d;
            border-bottom: 1px solid #369;
            color: white;
            cursor: move;
        }

        .hd span {
            float: right;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        window.addEventListener("load", function () {
            //获取被拖动的盒子和拖动条
            var box = document.getElementById("box");
            var drop = document.getElementById("drop");
            drop.addEventListener("mousedown", function (event) {//鼠标在拖拽条上按下可拖拽盒子
                var event = event || window.event;
                //获取鼠标按下时的位置
                var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
                var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
                //计算鼠标按下的位置据盒子的位置
                var spaceX = pageX - box.offsetLeft;
                var spaceY = pageY - box.offsetTop;
                document.addEventListener("mousemove", function (event) {//鼠标移动的时候 获取鼠标的位置 整个盒子跟着鼠标的位置走
                    var event = event || window.event;
                    //获取移动后鼠标的位置
                    var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
                    var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
                    //计算并设计盒子移动后的位置
                    box.style.left = pageX - spaceX + "px";
                    box.style.top = pageY - spaceY + "px";
                    //清理鼠标拖动时，选中拖动条中文字的情况
                    if (window.getSelection()) {
                        window.getSelection().removeAllRanges();
                    } else {
                        document.selection.empty();
                    }
                });
            });

        })
        document.onmouseup = function () {//释放鼠标按键后 取消盒子的移动
            document.onmousemove = null;
        };

    </script>
</head>
<body>
<div id="box" class="box">
    <div id="drop" class="hd">注册信息（可以拖拽）
        <span id="box_close">【关闭】</span>
    </div>
    <div class="bd"></div>
</div>
</body>
</html>